<template>
    <div>
        <div class="wrapper" id="wrapper"></div>
    </div>
</template>
<script>

import Chimee from 'chimee'
import hls from 'chimee-kernel-hls';

export default {
    mounted() {
        let canvas = document.querySelector('canvas')
        let ctx
        let chimee = new Chimee({
            wrapper: '#wrapper',
            src: 'https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8',
            // controls: true,
            autoplay: true,
            events: {
                play() {
                    console.log('play')
                }
            },
            kernels: {
                hls
            }
        })
        chimee.play()
        console.log('chimee', chimee)
        if (canvas.getContext) {
            ctx = canvas.getContext('2d')
            canvas.height = window.innerHeight
            canvas.width = window.innerWidth
            console.log('fdsa')
            setInterval(() => {
                ctx.drawImage(chimee, 0, 0, canvas.width, canvas.height)
            }, 2000)
        }
    }
}
</script>
<style>
container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
video {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #000;
}
video:focus,
video:active {
  outline: none;
}
</style>
